@import "//at.alicdn.com/t/font_6ec8qx3q5zbbj4i.css";
@main-color:#fa2672;
@font-color-1:#808080;
@font-color-2:#ccc;
@bg:#f0f0f0;
@font-size:14px;
@navbarbg:#000000;
@font-color:#ffffff;
@box-bg:#ffffff;

html{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  font-family: "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
}

body{
  background: @bg;
}
a{

  text-decoration: none;
}
a:hover{
  text-decoration: none;
  color: #000000;
}
a:active{
  color: #000000;
}
a:visited{
  color: #000000;
}
a:link{
  color: #000000;
}
/*顶部菜单样式*/
.navbar-content{
  z-index: 100;
  position: fixed;
  top: 0;
  width:100%;
  line-height: 2.3em;
  text-align: center;
  font-size: 1.4em;
  display: block;
  align-items: center;
  background: @navbarbg;
  color: #ffffff;
  height:2.3em;
  button{
    list-style: none;
    padding:0;
    position: absolute;
    left: 1em;
    height:100%;
    font-size: 0.8em;
    background: none;
    border: none;
    color: @font-color;
    .icon-return{
      color:@font-color;
    }

  }
  .icon-menu{
    position: absolute;
    right:1em;
    color:@font-color;
    font-size:  0.8em;
  }

}

.address-btn{
  font-weight: 400;
  display: block;
  position: fixed;
  bottom: 0;
  width:100%;
  text-align: center;
  line-height: 2.3em;
  font-size: 1.3em;
  margin-top: 0em;
  align-self: flex-end;
  height: 2.3em;
  color: @font-color;
  background: @main-color;
}
.icon-add{
  color: @font-color;
  font-size: 1.2em;
  margin-right: 0.5em;
}
.address-add-box{
  margin: 3.3em 0;
  background: @bg;
}

.address-no{
  margin-top: 3.3em;
  display: flex;
  flex-direction: column;
  .icon-weizhi-copy,.address-no-p1, .address-no-p2{
    font-weight: 100;
    margin-top: 40%;
    font-size: 6em;
    display: flex;
    align-items: center;
    flex-direction: column;
    color:@font-color-1;
  }
  .address-no-shadow{
    display: block;
    position: relative;
    left:50%;
    margin-left: -2.5em;
    font-size: 1em;
    background: @font-color-2;
    width: 5em;
    height:1.5em;
    border-radius: 50%;
  }
  .address-no-p1,.address-no-p2{
    font-weight: bold;
    font-size: 1.1em;
    margin-top: 0.5em;
  }
  .address-no-p2{
    font-weight: 500;
    font-size: 1em;
    color:@font-color-2;
  }

}


.address-card {
  background: @box-bg;
  margin-bottom: 0.5em;
  .address-card-top,.address-card-top-info{
    display: flex;
    flex-direction: column;
    .address-card-top-info{
      display: flex;
      padding: 0.8em 0.6em;
      flex-direction: row;
      .address-card-name{
        font-size: 0.9em;
        margin-right: 2em;
      }

    }
    .address-card-address{
      font-size: 0.9em;
      line-height: 1.5em;
      padding: 0 0.6em 0.6em 0.6em;
      border-bottom: 1px solid @font-color-2;
    }
  }
  .address-card-foot{
    padding:0.8em 0.6em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .address-card-btn{
      color: @font-color-1;
      align-items: center;
      font-size: 0.9em;
      display: flex;
      flex-direction: row;
      .address-card-btn-1{
        margin-right:1em;
        position: relative;
        width: 1.3em;
        height: 1.3em;
        border-radius: 50%;
        background: white;
        border: 1px solid #333;
        span{
          position: absolute;
          border-radius: 50%;
          left:0.25em;
          top:0.25em;
          width: 0.8em;
          height: 0.8em;
          background: white;
        }
        &.active{
          border-color: @main-color;
          span{
            background: @main-color;
          }
        }
      }

    }
    .address-card-set{
      display: flex;
      flex-direction: row;
      .address-card-set-del,.address-card-set-bj{
        display: flex;
        align-items: center;
        font-size: 0.9em;
        margin-left:1.4em ;
      }
      .icon-shanchu,.icon-bianji{
        margin-right:0.5em;
      }
    }
  }
}

.address-add{
  display: flex;
  flex-direction: column;
  .address-add-box{
    margin-top: 3.3em;
    background: @box-bg;
  }
  .address-add-name,.address-add-phone,.address-add-address,.address-add-place,.address-add-set{
    background: @box-bg;
    font-weight: 500;
    color: @font-color-1;
    font-size: 0.9em;
    margin:0 1em;
    border-bottom: 1px solid @font-color-2;
    display: flex;
    height:3.5em;
    align-items: center;
    justify-content: space-between;
    .address-add-name-input,.address-add-phone-input,.address-add-address-input,.address-add-place-input{
      border: none;
      outline: none;
      font-weight:500;
      font-size: 1em;
      height:2em;
      line-height: 2em;
    }

    .address-add-name-input,.address-add-phone-input{
      width:83%;
    }
    .address-add-address-input{
      width:70%;
    }
    .address-add-place-input{
      resize: none;
      overflow: hidden;
      height:3em;
      line-height: 1.2em;
      width:78%;
    }
    .address-add-set-right {
      position: relative;
      width: 4.4em;
      height: 2.2em;
      border-radius: 1.2em;
      background: @font-color-2;
      &.active{
        background: @main-color;
      }
      .address-add-set-right-c{
        position: absolute;
        top: 0.05em;
        left:0.05em;
        width:2.1em;
        height:2.1em;
        border-radius: 50%;
        background: #ffffff;
        transition: all .3s;
        &.active{
          left:2.25em;
          transition: all .3s;
        }
      }

    }
  }
  .address-add-set{
    border-bottom: none;
  }
  .address-add-set-left{
    -webkit-animation:setDefalutBtn .6s ease both;
    -o-animation:setDefalutBtn .6s ease both;
    animation:setDefalutBtn .6s ease both;
    display: flex;
    flex-direction: column;
    .address-add-set-left-s{
      font-size: 0.2em;
      padding:0.2em 0;
      color: @font-color-2;
    }
  }
  .address-add-place{
    align-items: flex-start;
    padding:1em 0;
    height:3.2em;
  }
  .address-add-btn{
    color: @font-color;
    background: @main-color;
    pointer-events: auto;
    &.active{
      color: @font-color-1;
      background: @font-color-2;
      pointer-events: none;
    }
  }

}
/*底部按钮样式*/
